<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    modelValue: { type: Number, required: true },
    size: { type: String, default: "12rpx" },
  },
});
</script>

<template>
  <div class="star-list" :style="{ fontSize: size }">
    <image
      class="star-list-item"
      v-for="i of modelValue"
      src="@/package/mall/static/jps-package-star.png"
      :key="i"
    />
  </div>
</template>

<style lang="scss">
.star-list {
  display: flex;
  align-items: center;
  padding-left: 10rpx;

  .star-list-item {
    width: 1em;
    height: 1em;
    margin-right: 10rpx;
  }
}
</style>
